<!DOCTYPE html>
<html>

	<head>
		<title>入住登记</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap -->
		<link href="../../../common/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
		<link href="../../../common/css/bootstrap.css" rel="stylesheet" media="screen">
	</head>
	<style type="text/css">
		.pagination-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1em;
		}
	</style>

	<body>
		<article>
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span12">
						<ul class="breadcrumb">
							
							<li>
								<a href="/index.html">主页</a> <span class="divider">/</span>
							</li>
							<li>
								<a href="/index.html">客户管理</a> <span class="divider">/</span>
							</li>
							<li>
								<a href="#">入住登记</a><span class="divider">/</span></li>
						</ul>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2 offset2">
						<a class="btn btn-primary" href="/view/checkin/add/checkin-add.html">新增</a>
					</div>
					<div class="span4">
						<form @submit.prevent="query" class="form-search">
							<input class="input-medium search-query" type="text" />
							<button type="submit" class="btn">查询</button>
						</form>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<table class="table table-hover">
							<thead>
								<tr>
									<th>序号</th>
									<th>客户姓名</th>
									<th>性别</th>
									<th>出生年月</th>
									<th>身份证号</th>
									<th>账号</th>
									<th>编号</th>
									<th>地址</th>
									<th>入住时间</th>
									<th>血型</th>
									<th>婚姻状况</th>
									<th>身高</th>
									<th>体重</th>
									<th>备注</th>
									<th>亲属信息</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody v-if="result!==null">
								<tr v-for="(row,i) in result.rows">
									<td>{{i+1}}</td>
									<td>{{row.name}}</td>
									<td v-if="row.male">男</td>
									<td v-if="!row.male">女</td>
									<td>{{row.birthday}}</td>
									<td>{{row.idCard}}</td>
									<td>{{row.account}}</td>
									<td>{{row.no}}</td>
									<td>{{row.address}}</td>
									<td>{{row.enterTime}}</td>
									<td v-if="row.booldType===0">O型</td>
									<td v-if="row.booldType===1">A型</td>
									<td v-if="row.booldType===2">B型</td>
									<td v-if="row.booldType===3">AB型</td>
									<td v-if="row.marriage===0">未婚</td>
									<td v-if="row.marriage===1">已婚</td>
									<td v-if="row.marriage===2">离异</td>
									<td v-if="row.marriage===3">丧偶</td>
									<td>{{row.height}}</td>
									<td>{{row.weight}}</td>
									<td>{{row.remark}}</td>
									<td> <button class="btn btn-link" @click="getElderId($event)" :value="row.id">查看</button></td>
									<td>
										<a :href="'/view/checkin/mod/checkin-mod.html?id='+row.id" class="btn btn-link">查看</a>
									</td>
								</tr>
							</tbody>
							<tbody v-if="result!=null&&result.totalRows==0">
								<tr>
									<td colspan="99">抱歉，无法找到相关数据!</td>
								</tr>
							</tbody>
						</table>
						<article class="pagination-box" v-if="result!==null">
							<div>
								<span>共<b>{{result.totalRows}}</b>条记录
							</span> <span>每页<b>{{result.pageSize}}</b>条
							</span> <span>共<b>{{result.totalPages}}</b>页
							</span>
							</div>
							<div id="pagination-links-box">
								<a href="javascript:" @click="query(1)">首页</a>
								<a href="javascript:" @click="query(result.pageNo-1)">上一页</a> <b id="pageNoEL">{{result.pageNo}}</b>
								<a href="javascript:" @click="query(result.pageNo+1)">下一页</a>
								<a href="javascript:" @click="query(result.totalPages)">末页</a>
							</div>
						</article>
					</div>
				</div>
			</div>
		</article>
		<script src="http://code.jquery.com/jquery.js"></script>
		<script src="../../../common/js/bootstrap.js "></script>
		<script src="../../../common/axios.min.js "></script>
		<script src="../../../common/jun/yi.toast.js "></script>
		<script src="../../../common/vue.js "></script>
		<script src="checkin-list.js"></script>
	</body>

</html>